<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/views/common/taglibs.jsp" %>
<!DOCTYPE>
<html>
<head>
    <!-- 引入通用js、css文件(xiaogq) -->
    <meta name="decorator" content="bootstrap">
    <link rel="stylesheet" type="text/css" href="${ctx}/css/widget/multiselect/multiselect.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/css/common/operation/sys_operation.css"/>
</head>
<body>
<div class="button_list">
    <a href="javascript:;" fieldId="${fieldId}" resFieldId="${resFieldId}" resOptionId="${resOptionId}" resOptionName="${resOptionName}" onclick="saveRestrictFieldInfo(this)">
            <span class="span_button">
                <span><img src="${ctx}/image/common/operation/oper_SAVE.png"></span>
                <span name="buTitle">保存</span>
            </span>
    </a>
    <a href="javascript:;" onclick="javascript:parent.closeTab();">
            <span class="span_button">
                <span><img src="${ctx}/image/common/operation/oper_CANCEL.png"></span>
                <span name="buTitle">取消</span>
            </span>
    </a>
</div>
<div class="box">
    <div class="left" style="width: 240px; padding-left: 10px; line-height: 35px; background-color: rgb(92,188,228);float: left">${fieldLocal }:枚举值</div>
    <div class="right" style="width: 240px; padding-left: 10px; line-height: 35px; background-color: rgb(85,145,225);float: right">已选择</div>
    <div id="hidden_enumfield" class="box_l">
        <c:forEach items="${hideList}" var="hitem" varStatus="v">
            <li><input type="checkbox" id="check${hitem.id}" optionId="${hitem.id}" optionName="${hitem.name}" class="checkbox"><label for="check${hitem.id}">${hitem.name}</label></li>
        </c:forEach>
    </div>
    <div class="box_m">
        <a href="javascript:" id="alltop">首个</a>
        <a href="javascript:" id="top"><span class="glyphicon glyphicon-chevron-up"></span></a>
        <a href="javascript:" id="allleft"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a href="javascript:" id="allright"><span class="glyphicon glyphicon-chevron-right"></span></a>
        <a href="javascript:" id="bottom"><span class="glyphicon glyphicon-chevron-down"></span></a>
        <a href="javascript:" id="allbottom">最后</a>
    </div>
    <div id="show_enumfield" class="box_r">
        <c:forEach items="${showList}" var="sitem" varStatus="v">
            <li><input type="checkbox" id="check${sitem.id}" optionId="${sitem.id}" optionName="${sitem.name}" class="checkbox"><label for="check${sitem.id}">${sitem.name}</label></li>
        </c:forEach>
    </div>
</div>
<script type="text/javascript" src="${ctx}/js/widget/multiselect/multiselect.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".box").orso({
            boxl:".box_l",//左边大盒子
            boxr:".box_r",//右边大盒子
            boxlrX:"li",//移动小盒子
            boxon:"choose",//点击添加属性
            checkbox:".checkbox",//复选框（新添加）
            idclass:true,//添加的属性是否为class//true=class; false=id;
            boxtan:"#top",//单个向上移动按钮
            boxban:"#bottom",//单个向下移动按钮
            boxalllan:"#allleft",//批量向左移动按钮
            boxallran:"#allright",//批量向右移动按钮
            boxalltan:"#alltop",//移动第一个按钮
            boxallban:"#allbottom"//移动最后一个按钮
        });
    });

    //保存枚举值约束关系方法(xiaogq)
    function saveRestrictFieldInfo(node) {
        //获取被约束字段id
        var fieldId = $(node).attr("fieldId");
        //获取约束字段id
        var resFieldId = $(node).attr("resFieldId");
        //获得枚举值id
        var resOptionId = $(node).attr("resOptionId");
        //获取枚举值名称
        var resOptionName = $(node).attr("resOptionName");

        var sortOptions = new Array();
        $("#show_enumfield li").find("input").each(function() {
            sortOptions.push( '{"id":'+$(this).attr("optionId")+', "name":"'+trim($(this).attr("optionName"))+'"}' );
        });
        sortOptions = "[" + sortOptions + "]";
        $.ajax({
            type: "POST",
            url: "${ctx}" + "/"+Constants.saveFieldRestrictedEditUrl,
            data: "fieldId="+fieldId+"&resFieldId="+resFieldId+"&resOptionId="+resOptionId+"&resOptionName="+resOptionName+"&sortOptions="+sortOptions,
            dataType: "json",
            success: function(msg) {
                var flag = msg.flag;
                if(!flag){
                    alert("定义枚举值约束关系失败!");
                }
                parent.closeTab(1);
            },
            error: function(msg) {
                alert("定义枚举值约束关系错误!");
            }
        });
    }
</script>
</body>
</html>
